<template>
	<div class="person">
		<h1>我是Person组件</h1>
		<button @click="nl += 1">点我让强哥的年龄+1岁（会报错）</button>
		<button @click="addHobby">给强哥加个爱好</button>
		<button @click="changeHobby">改变强哥所有的爱好</button>
		<button @click="ches.c1='布加迪'">给强哥第一个座驾改名</button>
		<button @click="changeChes">给强哥换所有座驾</button>
		<h4>人名：{{ming}}</h4>
		<h4>年龄：{{nl+1}}</h4>
		<h4>性别：{{sex}}</h4>
		<h4>爱好：</h4>
		<ul>
			<li v-for="(item, index) in hobby" :key="index">{{item}}</li>
		</ul>
		<h4>座驾：</h4>
		<ul>
			<li v-for="(value, key) in ches" :key="key">{{value}}</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name:'Person',
		//第一种接收方式：单纯的接收
		// props:['ming','nl','sex','hobby','ches'],

		//第二种接收方式：接收 + 限制数据类型
		/* props:{
			ming:String,
			nl:Number,
			sex:String,
			hobby:Array,
			ches:Object
		}, */

		//第三种接收方式：接收 + 限制数据类型 + 指定默认值 + 必要性限制
		props:{
			ming:{
				type:String,
				default:'张三',
				required:true
			},
			nl:Number,
			sex:String,
			hobby:{
				type:Array,
				default(){
					return ['唱歌','吃臭豆腐']
				},
			},
			ches:Object
		},

		methods: {
			addHobby(){
				this.hobby.push('中奖') 
			},
			changeHobby(){
				this.hobby = ['看电影','去酒吧','蹦迪']
			},
			changeChes(){
				this.ches = {c1:'奥拓',c2:'永久自行车'}
			}
		},
	}
</script>

<style scoped>
	.person{
		background-color: orange;
		padding: 20px;
	}
</style>